<html>
<head>
  <title>English Football 2004 Week 7 Livescores</title>
  <!-- load scripts which vert.x uses -->
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
  <script src="vertx-eventbus.js"></script>
</head>

<!-- CSS styles -->
<style>
  .clock {
    font-family: Helvetica, Arial, sans-serif;
    margin-left: 180px;
    font-size: 40pt;
    color: darkblue;
  }

  .update {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22pt;
  }

  .team {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22pt;
  }

  .scorer {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20pt;
  }

  .gametable {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20pt;
    width: 400px;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .gametable .td, .th {
    border: 1px solid transparent; /* No more visible border */
    height: 36px;
    transition: all 0.3s; /* Simple transition for hover effect */
  }

  .gametable .th {
    background: #DFDFDF; /* Darken header a bit */
    font-weight: bold;
    text-align: left;
  }

  .gametable .td {
    background: #FAFAFA;
    text-align: left;
  }

  /* Cells in even rows (2,4,6...) are one color */
  .gametable tr:nth-child(even) {
    background: #CDCDCD
  }

  /* Cells in odd rows (1,3,5...) are another (excludes header cells) */
  .gametable tr:nth-child(odd) {
    background: #FEFEFE
  }

</style>

<body>

<!-- to show game clock -->
<div id="clock" class="clock"></div>

<!-- to show control buttons -->
<div id="controls" class="controls">
  <button onclick="startClock()" type="button">Start</button>
  <button onclick="stopClock()" type="button">Stop</button>
</div>

<!-- table with list of games -->
<div id="games">
  <table class="gametable">
    <thead>
    <th style="text-align: left">Home</th>
    <th style="text-align: left">Away</th>
    <th style="text-align: right">Score</th>
    </thead>
    <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    </tbody>
  </table>
</div>

<!-- goal scorer ticker -->
<div id="update" style="display:none">
  <div id="scorer" class="scorer"></div>
  <div id="updatedscore">
    <span id="home" class="team"></span>
    <span id="away" class="team"></span>
  </div>
</div>

<script>
  // connect to Vert.X eventbus at /eventbus
  var eb = new EventBus("/eventbus");

  // when opening a new connection
  // then register the following handlers (clock, games, goals)
  eb.onopen = function () {

    // event for game time clock being updated
    eb.registerHandler("clock", function (err, msg) {
      document.getElementById("clock").innerHTML = msg.body;
    });

    // event for list of games
    // notice there is one message per game, and there are 9 games and hence this handler receives 9 messages
    eb.registerHandler("games", function (err, msg) {
      var arr = msg.body.split(',');
      var game = arr[0];
      var home = arr[1];
      var away = arr[2];

      // append the game to the end of the table
      var tableRef = document.getElementById('games').getElementsByTagName('tbody')[0];
      var newRow = tableRef.insertRow(tableRef.rows.length);
      var newCell = newRow.insertCell(0);
      var newText = document.createTextNode(home);
      newCell.appendChild(newText);
      var newCell2 = newRow.insertCell(1);
      var newText2 = document.createTextNode(away);
      newCell2.appendChild(newText2);
      var newCell3 = newRow.insertCell(2);
      var newText3 = document.createTextNode("0 - 0");
      newCell3.style = "text-align: right";
      newCell3.appendChild(newText3);
    });

    // event for every goal scored
    // there is also an event if there was no goal scored in a new game clock so the web page can clear
    eb.registerHandler("goals", function (err, msg) {
      if (msg.body === 'empty') {
        // this time there was no goal scored so clear the display
        clearScorer();
        return;
      }

      // there is a goal so play sound
      playsound();

      // split the message into pieces so we know more details about the goal scored
      var arr = msg.body.split(',');
      var game = arr[0];
      var min = arr[1];
      var scorer = arr[2];
      var home = arr[3];
      var away = arr[4];
      var team = arr[5];
      var score = arr[6];

      // update table with score
      var tableRef = document.getElementById('games').getElementsByTagName('tbody')[0];
      var row = tableRef.getElementsByTagName('tr')[game];
      var cell = row.getElementsByTagName('td')[2];
      cell.innerHTML = score;
      cell.style.color = "red";
      blinkCell(cell);

      // show flashing scorer also
      document.getElementById("update").style = "";
      document.getElementById("home").innerHTML = home;
      document.getElementById("away").innerHTML = away;
      document.getElementById("scorer").innerHTML = "Scored by: " + scorer;

      if (team == 'Home') {
        document.getElementById("home").style.color = 'red';
        document.getElementById("away").style.color = 'black';
        blinkHome()
      } else {
        document.getElementById("home").style.color = 'black';
        document.getElementById("away").style.color = 'red';
        blinkAway()
      }
    })
  };

  startClock = function () {
    // user click start button
    // send start message to the control address on the Vert.X eventbus
    eb.send("control", "start");
  };

  stopClock = function () {
    // user click stop button
    // send stop message to the control address on the Vert.X eventbus
    eb.send("control", "stop");
  };

  playsound = function () {
    // play the bell sound
    var audio = new Audio('bell.m4r');
    audio.play();
  };

  blinkHome = function () {
    for (i = 0; i < 5; i++) {
      $("#home").fadeTo('slow', 0.1).fadeTo('slow', 1.0);
    }
  };

  blinkAway = function () {
    for (i = 0; i < 5; i++) {
      $("#away").fadeTo('slow', 0.1).fadeTo('slow', 1.0);
    }
  };

  blinkCell = function (cell) {
    for (i = 0; i < 5; i++) {
      $(cell).fadeTo('slow', 0.1).fadeTo('slow', 1.0);
    }
  };

  clearScorer = function () {
    // clear event
    document.getElementById("update").style = "display:none";
    // clear table for all marked goals
    var tableRef = document.getElementById('games').getElementsByTagName('tbody')[0];
    for (i = 0; i < tableRef.rows.length; i++) {
      var row = tableRef.rows[i];
      var cell = row.getElementsByTagName('td')[2];
      cell.style.color = "black";
    }
  };

</script>

</body>
</html>
